<template>
  <div>
    <el-input v-model="selectName" placeholder="请输入内容" style="width: 70%;"></el-input>
    <el-button type="primary" plain icon="el-icon-search" @click="getList"></el-button>
    <!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词-->
    <el-pagination v-model="currentPage" :page-size=pageSize layout="total, prev, pager, next" :total=total
      @current-change="handleCurrentChange" />
    <aplayer v-if=audioswitch :music="audio[0]" :list="audio"></aplayer>
  </div>
</template>

<script>
import aplayer from "vue-aplayer";
import MusicApi from '../../api/classify'

const options = {
  data() {
    return {
      audioswitch: false,
      audio: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectName: '',
    }
  },
  components: { aplayer },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      //重启一下组件
      this.audioswitch = false
      let that = this;
      let param = new URLSearchParams();
      that.audio = [];
      param.append('pageNumber', that.currentPage);
      param.append('pageSize', that.pageSize);
      param.append('name', that.selectName)
      await MusicApi.getAudioList(param).then(res => {
        that.total = res.data.data.total
        for (let i = 0; i < that.total; i++) {
          that.audio.push({
            title: res.data.data.records[i].name,
            artist: '寻真云盘',
            url: res.data.data.records[i].src,
            pic: 'http://192.168.20.6:6000/wpsources%20/musiclogo.jpg',
            lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh'
          })
        }
      })
      console.log(this.audio)
      this.audioswitch = true
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
      this.getList();
    },
  }
}
export default options
</script>